<!DOCTYPE html>
<html>
<head>
    <!-- gbk gb18030  gb2312  三种简体中文   字库的多少
         big5   繁体中文
         utf-8  国际化语言，支持所有的语言编码
         默认最古老的语言编码是  ISO-8859-1   西欧语言编码
         语言编码不需要区分大小写  所有utf-8  和 UTF-8   和  Utf-8  是一样的作用

         title 代表当前页面的标题
         input输入框 ，可以输入  明文内容，也可以输入密文内容
         type="text"  代表明文
         type="password"  代表密文
      -->
    <meta charset="utf-8" />
    <title>基线数据采集分析云平台</title>
    <link rel="stylesheet" type="text/css" href="login/css/index.css"/>
    <style type="text/css">
        /*body{
           background: url(img/4.jpg) no-repeat;
        }*/
    </style>
</head>
<script src="jquery/jquery-3.5.1.js"></script>
<body>
<div class="bg">
    <div class="wel">基线数据采集分析云平台</div>
    <div class="user">
        <div style="">用户名</div>
        <input  type="text" name="用户"  placeholder="输入用户名" id="username" />
    </div>
    <div class="password">
        <div>密&nbsp;&nbsp;&nbsp;码</div>
        <input class="" type="password" name="密码" id="password" />
    </div>
    <div class="rem" >
        <input type="checkbox" name="" id="" value="" />
        <div id="reb">
            记住密码
        </div>
    </div>
    <div class="fg" >
        <div style="font-size: 11px;margin-top: 11px;">
            <a style="font-size: 11px;" href="#">忘记密码？</a>
        </div>
    </div>
    <input class="btn" type="button" id="registerButton" name="注册" value="注册" />
</div>
</body>

<script>
    // $(function() ...)   这个头文件，代表等待整个页面加载完成，才激活对应js代码处理
    // $("#loginButton").click(function () {}   指定某一个按钮，绑定对应的鼠标左键点击事件   绑定指定的id值，这个值是自定义的
    // $("#username").val()   获取某一个id值为username的标记，得到用户的输入内容
    $(function () {                                              // 等待整个页面加载完毕时，才开始执行js代码
        $("#registerButton").click(function () {                    // 指定一个html标签，id为loginButton的控件，绑定一个鼠标左键单击事件
            var username = $("#username").val();                 // 获取id为yongHuMingCheng控件中，用户输入的内容
            var password = $("#password").val();                 // 获取id为miMa控件中，用户输入的内容

            // 在网络请求中，通常会使用两种请求行为，1.为get请求  2.为post请求
            // get请求，是我们通常称呼的明文式请求，不能做到网络安全
            // post请求，是我们通常称呼的隐藏式请求，不会直接的把传递的数据，暴露出来
            // 在数据库设计增删改查中，只有查询会走get请求，其余操作全部走post请求

            $.ajax({                                             // 异步请求   想象成线程状态
                url:"/shiro/register",                               // 请求路径   请求服务器的哪一个接口
                type:"post",                                     // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                datatype:"text",
                data:{                            // request中传递的key-value值
                    username:username,
                    password:password
                },
                success:function(response){                      // 后台服务响应成功，自动返回数据
                    console.log(response);                       // 页面级的调试规则，可以输入到页面的控制台中
                    alert(response.msg);
                },
                error:function(response){                        // 网络请求失败，自动调用此方法
                    console.log("出错" + response);
                }
            });
        });
    });
</script>
</html>
